import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { hashHistory } from 'dva/router';
import styles from '../../routes/IndexPage.css';
import { Icon, Select, } from 'antd';
import G2 from 'g2';
import createG2 from 'g2-react';
var _state,_props,_this;
const Option = Select.Option;

const Chart = createG2(chart => {
      const Stat = G2.Stat;
      chart.axis('name',{
        title: null
      });
      chart.axis('value',{
        title: null
      });
      chart.interval().position('name*value').color('#3db1fa').size(20);
      chart.render();
});

const loopRoom = data => data.map((item) => {
    return <Option key={item.id_ + ''}>{item.name}</Option>
});



class typeModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      forceFit: true,
      width: 300,
      height: 280,
      plotCfg: {
        margin: [20, 0, 60, 60]
      },
    };
  }
  componentDidMount() {
    // const data = [
    //   {value:35, name:'服务器'},
    //   {value:10, name:'类型'},
    //   {value:74, name:'机柜'},
    //   {value:35, name:'机房'},
    //   {value:40, name:'机主'},
    //   {value:40, name:'机主2'},
    //   {value:40, name:'机主3'},
    //   {value:40, name:'机主4'},
    // ];
    // console.log(this.refs.chartbox.clientWidth);
    // console.log(this.refs.chartbox.scrollWidth);
    // console.log(this.refs.chartbox.offsetWidth);

    this.setState({width: document.body.clientWidth-600});
  }
  handleRoomChange = (value) => {
     _props.dispatch({
        type: _props.updata,
        payload: value
      })   
  }; 
  

  render() {
    _this = this;
    _props = _this.props;
    _state = _this.state;

    return (
      <div className={styles.typeModal}>
        <div className={styles.typetit}>
          <div style={{fontSize: 14,color: "#666",fontWeight: 700}}>
            机房资产分类
          </div>
          <Select 
            className={styles.typeSelect} 
            placeholder="选择机房"  
            style={{ width: 120 }}
            onChange={this.handleRoomChange}
          >            
            {loopRoom(_props.roomList)}
          </Select>
        </div>
        <div className={styles.typetotal}>
          <span style={{fontSize: 24,color: "#666",fontWeight: "bold"}}>
            {_props.total}
          </span> 设备总量
        </div>
        <div className={styles.typecont} ref="chartbox">
          <Chart
            data={_props.assetCountByRoom}
            width={this.state.width}
            height={this.state.height}
            plotCfg={this.state.plotCfg}
            forceFit={this.state.forceFit} />
        </div>
      </div>
    );
  }
}

module.exports = typeModal
